import React from 'react'
import { Form, Input, Button, Notify } from 'react-vant'
import axios from 'axios'
import { useNavigate } from 'react-router-dom'
import { useDispatch } from 'react-redux'
const Index = () => {
  const navigate = useNavigate();
  const dispatch = useDispatch()
  const onFinish = values => {
    axios.post('/api/login', values).then(resp => {
      const { code, message, data } = resp.data;
      if(code === 200) {
        navigate('/')
        Notify.show({ type: 'success', message })
        // 
        dispatch({  type: 'saveUserInfo', payload: data })
      } else {
        Notify.show({ type: 'danger', message })
      }
   
    })
  }
  return (
    <div>
      <Form
        onFinish={onFinish}
        footer={
          <div>
            <Button type="primary" nativeType='submit' block round>登陆</Button>
          </div>
        }>
        <Form.Item label="用户名" name="username">
          <Input></Input>
        </Form.Item>
        <Form.Item label="密码" name="password">
          <Input></Input>
        </Form.Item>
      </Form>
    </div>
  )
}

export default Index